<template>
 <div class="content">
		<div class="top_box">个人信息设置</div>
		<div class="bottom_box">
			<div class="bottom_box_left">
				<!-- <img src="../../assets/image/home/user.png" alt=""> -->
				
				<div class="bottom_left_button" @click="upload">重新上传</div>
			</div>
			<div class="bottom_box_right">
				<div class="bottom_box_tit">
					<div></div>
					<div>信息</div>
				</div>
				<div class="bottom_input">
					<div>姓名</div>
					<input type="text" placeholder="请输入姓名">
				</div>
				<div class="bottom_input">
					<div>邮箱</div>
					<input type="email" placeholder="请输入姓名">
					<div>更改邮箱</div>
				</div>
				<div class="bottom_line"></div>
				<div class="bottom_box_tit">
					<div></div>
					<div>更改密码</div>
				</div>
				<div class="bottom_input">
					<div>原始密码</div>
					<input type="password" placeholder="请输入原始密码">
				</div>
				<div class="bottom_input">
					<div style="margin-right: 0.31rem;">新密码</div>
					<input type="password" placeholder="请输入新密码">
				</div>
				<div class="bottom_input">
					<div>确认密码</div>
					<input type="password" placeholder="请输入确认密码">
				</div>
				<div class="bottom_check" @click="save">保存</div>
			</div>
		</div>
		<input id="upfile" style="opacity: 0;" type="file" @change="tirggerFile($event)" >
 </div>
</template>

<script>

import axios from "axios"
import qs from 'qs'

export default {
  name: 'floor',
   data() {
 	return {
		filename:'',
		fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]
 	}
 },
		mounted(){
			this.filename=document.getElementById("upfile").value
		},
		beforeDestroy() {


		},
		 methods:{
			 tirggerFile(){
				 var file = event.target.files;
				 console.log(document.getElementById("upfile").value)
				 console.log(document.getElementById("upfile").files[0])
				 this.filename=document.getElementById("upfile").files[0].name
				 if(event.target.files[0]){
					 // image/png
					 if(event.target.files[0].type!="image/jpeg"&&event.target.files[0].type!="image/png"){
						 this.$message({
						           message: '上传的文件不是图片',
						           type: 'warning'
						         });
								
						 return
					 }

					 var file=document.getElementById("upfile").files[0]
					 var formData = new FormData();
					  formData.append('inputFile',file);
					  console.log(formData)
				 }else{
					 this.$message({
					           message: '没有上传文件',
					           type: 'warning'
					         });
				 }
				
				
			 },
			 save(){
	
			 },
			 upload(){
				 var file=document.getElementById("upfile")
				 file.click()
				 console.log(file)
				 
				// console.log(this.$request)
				// this.$request.post("https://www.baidu.com",{}).then((res)=>{
				// 	console.log(res)
				// }).catch((err)=>{
				// 	this.$message({
				// 	          message: '警告哦，这是一条警告消息',
				// 	          type: 'warning'
				// 	        });
				// })
			 },

		 },
		 watch: {
		 	filename(newValue, oldValue) {
		 		console.log(newValue)
		 	}
		 }
	}
</script>
<style lang="less" scoped>
.content{
	width: 100%;
	height: 7.77rem;
	border-radius: 0.01rem;
	background-color: white;
	padding: 0.25rem 0.42rem 0 0.43rem;
	.top_box{
		padding: 0 0 0.17rem;
		box-sizing: border-box;
		border-bottom: 0.01rem solid #E8E8E8;
		font-size: 0.18rem;
		
	}
	.bottom_box{
		width: 100%;
		display: flex;
		align-items: flex-start;
		justify-content: flex-start;
		.bottom_box_left{
			padding:1.49rem 0 0 0.94rem ;
			margin-right: 1.21rem;
			&>img{
				width: 0.97rem;
				height: 0.97rem;
				display: block;
				border-radius: 50%;
			}
			& .bottom_left_button{
				margin:0.16rem 0 0 0.12rem;
				cursor: pointer;
				width: 0.74rem;
				height: 0.28rem;
				background: #7888CA;
				border-radius: 0.03rem;
				line-height: 0.28rem;
				text-align: center;
				color: white;
				font-size: 0.12rem;
			}
		}
		.bottom_box_right{
			width: 4.79rem;
			padding-top: 0.53rem;
			.bottom_box_tit{
				display: flex;
				align-items: center;
				margin-bottom: 0.21rem;
				&>div:nth-child(1){
					width: 0.04rem;
					height: 0.17rem;
					background: #7588DB;
					margin-right: 0.11rem;
				}
				&>div:nth-child(2){
					font-size: 0.16rem;
					color: #444444;
				}
			}
			.bottom_input{
				height: 0.32rem;
				display: flex;
				align-items: center;
				margin-bottom: 0.18rem;
				&>div:nth-child(1){
					color: #848484;
					font-size: 0.14rem;
					margin-right: 0.17rem;
				}
				&>input{
					width: 1.97rem;
					height: 0.32rem;
					box-sizing: border-box;
					 outline:0px;
				}
				&>div:nth-child(3){
					width: 0.88rem;
					height: 0.32rem;
					border: 0.01rem solid #6A7CEC;
					box-sizing: border-box;
					border-radius: 0.03rem;
					line-height: 0.32rem;
					text-align: center;
					color: #4B63C8;
					font-size: 0.13rem;
					margin-left: 0.16rem;
				}
			}
			.bottom_line{
				width: 100%;
				height: 0.01rem;
				background: #E8E8E8;
				margin-top: 0.44rem;
				margin-bottom: 0.47rem;
			}
			.bottom_check{
				margin-top: 0.32rem;
				width: 0.77rem;
				height: 0.32rem;
				border: 0.01rem solid #6A7CEC;
				border-radius: 0.03rem;
				box-sizing: border-box;
				line-height: 0.32rem;
				text-align: center;
				color: #4B63C8;
				font-size: 0.13rem;
			}
		}
	}
}
</style>